<template>
  <div>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
  </div>
</template>

<script>
import echarts from 'echarts'

require('echarts/lib/chart/scatter')
// 散点图放大
require('echarts/lib/chart/effectScatter')
// 地图
require('echarts/lib/chart/map')
// 图例
require('echarts/lib/component/legend')
// 提示框
require('echarts/lib/component/tooltip')
// 地图geo
require('echarts/lib/component/geo')

require('echarts/map/js/province//beijing')
// require('./map/js/xinyang')
import resize from './mixins/resize'

import newData from './data.json'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart2'
    },
    width: {
      type: String,
      default: '400px'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      chart: null,
      valueYear: '',
      valueMonth: '',
      valueDate: '',
      searchForm: {
        type: '3',
        times: new Date(new Date()).Format('yy-MM')
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async initChart(newFrom) {
      this.chart = echarts.init(document.getElementById(this.id))
      let res = await this.$api.getMap()
      var hStep = 300 / (newData.length - 1)
      let newArr = []
      res.data.data.forEach((item, index) => {
        newArr.push({
          coords: [item.lat, item.lng],
          lineStyle: {
            normal: {
              color: echarts.color.modifyHSL(
                '#5A94DF',
                Math.round(hStep * index)
              )
            }
          }
        })
      })
      var busLines = [].concat.apply(
        [],
        newData.map(function(busLine, idx) {
          var prevPt
          var points = []
          for (var i = 0; i < busLine.length; i += 2) {
            var pt = [busLine[i], busLine[i + 1]]
            if (i > 0) {
              pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
            }
            prevPt = pt

            points.push([pt[0] / 1e4, pt[1] / 1e4])
          }

          return {
            coords: points,
            lineStyle: {
              normal: {
                color: echarts.color.modifyHSL(
                  '#5A94DF',
                  Math.round(hStep * idx)
                )
              }
            }
          }
        })
      )
      console.log(busLines, 'newDatanewDatanewData')
      console.log(newArr, 'res')
      this.chart.setOption({
        backgroundColor: '#272D3A',
        // 标题
        title: {
          // text: '中国地图闪闪发光',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },

        // // 地图上圆点的提示
        // tooltip: {
        //   trigger: 'item',
        //   formatter: function(params) {
        //     return params.name + ' : ' + params.value[2]
        //   }
        // },
        // 图例按钮 点击可选择哪些不显示
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'bottom',
          data: ['地区热度', 'top5'],
          textStyle: {
            color: '#fff'
          }
        },
        // 地理坐标系组件
        geo: {
          map: '北京',
          label: {
            // true会显示城市名
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            // 地图背景色
            normal: {
              areaColor: '#282F3C',
              borderColor: '#282F3C'
            },
            emphasis: {
              areaColor: 'none'
            }
          }
        },
        // center: [114.04, 32.07],
        zoom: 1.2,
        roam: true,
        // 系列列表
        mapStyle: {
          styleJson: [
            {
              featureType: 'water',
              elementType: 'all',
              stylers: {
                color: '#031628'
              }
            },
            {
              featureType: 'land',
              elementType: 'geometry',
              stylers: {
                color: '#000102'
              }
            },
            {
              featureType: 'highway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry.fill',
              stylers: {
                color: '#000000'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry.stroke',
              stylers: {
                color: '#0b3d51'
              }
            },
            {
              featureType: 'local',
              elementType: 'geometry',
              stylers: {
                color: '#000000'
              }
            },
            {
              featureType: 'railway',
              elementType: 'geometry.fill',
              stylers: {
                color: '#000000'
              }
            },
            {
              featureType: 'railway',
              elementType: 'geometry.stroke',
              stylers: {
                color: '#08304b'
              }
            },
            {
              featureType: 'subway',
              elementType: 'geometry',
              stylers: {
                lightness: -70
              }
            },
            {
              featureType: 'building',
              elementType: 'geometry.fill',
              stylers: {
                color: '#000000'
              }
            },
            {
              featureType: 'all',
              elementType: 'labels.text.fill',
              stylers: {
                color: '#857f7f'
              }
            },
            {
              featureType: 'all',
              elementType: 'labels.text.stroke',
              stylers: {
                color: '#000000'
              }
            },
            {
              featureType: 'building',
              elementType: 'geometry',
              stylers: {
                color: '#022338'
              }
            },
            {
              featureType: 'green',
              elementType: 'geometry',
              stylers: {
                color: '#062032'
              }
            },
            {
              featureType: 'boundary',
              elementType: 'all',
              stylers: {
                color: '#465b6c'
              }
            },
            {
              featureType: 'manmade',
              elementType: 'all',
              stylers: {
                color: '#022338'
              }
            },
            {
              featureType: 'label',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            }
          ]
        },
        series: [
          {
            type: 'lines',
            coordinateSystem: 'geo',
            polyline: true,
            data: busLines,
            silent: true,
            lineStyle: {
              // color: '#c23531',
              // color: 'rgb(200, 35, 45)',
              opacity: 0.2,
              width: 1
            },
            progressiveThreshold: 500,
            progressive: 200
          },
          {
            type: 'lines',
            coordinateSystem: 'geo',
            polyline: true,
            data: busLines,
            lineStyle: {
              width: 0
            },
            effect: {
              constantSpeed: 20,
              show: true,
              trailLength: 0.1,
              symbolSize: 1.5
            },
            zlevel: 1
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
